<template>
	<div class="footer-bar" v-if="showFooterBar">
		<van-tabbar v-model="active" @change="onChange" safe-area-inset-bottom active-color="#222222" inactive-color="#888888">
			<van-tabbar-item v-for="(item, index) in tabbarList" :key="index">
				<template #icon="props">
					<div class="icon">
						<img :src="item.checkIconUrl" v-show="props.active" />
						<img :src="item.unCheckIconUrl" v-show="!props.active" />
					</div>
				</template>
				{{ item.name }}
			</van-tabbar-item>
		</van-tabbar>

		<div class="guide-mask" id="step-3"></div>
	</div>
</template>

<script>
import { Tabbar, TabbarItem, Toast } from 'vant';
import { mapGetters, mapMutations } from 'vuex';

export default {
	name: 'FooterBar',
	components: {
		'van-tabbar': Tabbar,
		'van-tabbar-item': TabbarItem
	},
	data() {
		return {
			active: 0
		};
	},
	created() {
		this.$store.dispatch('tabbarLoad').then(() => {
			this.tabRouter(this.$route);
		});
	},
	computed: {
		...mapGetters(['token', 'tabbarList', 'showFooterBar'])
	},
	methods: {
		tabRouter(val) {
			this.active = this.tabbarList.findIndex(e => val.path == e.link);
		},

		onChange(i) {
			this.$router.push({
				path: decodeURIComponent(this.tabbarList[i].link),
				query: {}
			});
		}
	},
	watch: {
		$route: {
			handler(val) {
				this.tabRouter(val);
			},
			deep: true
		}
	}
};
</script>

<style lang="scss" scoped>
.footer-bar {
	width: 100%;
	height: 100px;
	background: $color-white;
	z-index: 100;
	position: fixed;
	bottom: 0;

	/deep/.van-tabbar {
		height: 100px;
	}

	/deep/.van-tabbar-item {
		display: flex;
		flex-direction: column;
	}

	.guide-mask {
		height: 101px;
		height: calc(101px + env(safe-area-inset-bottom));
		width: 25%;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.icon {
		img {
			height: 40px;
			width: 40px;
		}
	}
}
</style>
